<template>
  <el-form-item
    :label="hiddenLabel ? ' ' : meta.memo"
    :label-width="hiddenLabel ? '0px' : ''"
    :required="meta.tagNeed"
    :prop="meta.name"
  >
    <template v-if="meta.component">
      <plugin-pack :component="meta.component" :componentParam="formData">
        <el-button type="primary" link>{{ meta.memo }}</el-button>
      </plugin-pack>
    </template>
    <template v-else-if="dictList && dictList.length > 0">
      <com-select
        v-model="bindVal"
        :dictList="dictList"
        :multiple="meta.multiple"
        :memo="meta.memo"
      />
    </template>
    <template v-else-if="meta.type === 3">
      <el-date-picker
        v-model="bindVal"
        type="datetime"
        :placeholder="`请输入${meta.memo}`"
        value-format="x"
        style="width: 100%"
      />
    </template>
    <template v-else-if="meta.type === 140">
      <com-tags-select v-model:checks="bindVal" />
    </template>
    <template v-else-if="meta.type === 150">
      <com-param-select v-model:defaultIds="bindVal" />
    </template>
    <template v-else-if="meta.type === 2">
      <el-input-number
        v-model.number="bindVal"
        :placeholder="`请输入${meta.memo}`"
      />
    </template>
    <template v-else-if="meta.type === 210">
      <el-input-number
        v-model.number="bindVal"
        :precision="2"
        :placeholder="`请输入${meta.memo}`"
      />
    </template>
    <template v-else-if="[110, 111, 160, 161].includes(meta.type)">
      <com-upload
        v-model:fileKey="bindVal"
        :limit="[110, 160].includes(meta.type) ? 1 : 9"
      ></com-upload>
    </template>
    <template v-else-if="meta.type === 170">
      <com-address-select v-model="bindVal"></com-address-select>
    </template>
    <template v-else-if="meta.type === 180">
      <plugin-pack>
        <template v-slot:content>
          <big-text v-model="bindVal"></big-text>
        </template>
      </plugin-pack>
    </template>
    <template v-else-if="formData && formData._address && meta.type === 171">
      <com-address-select v-model="bindVal"></com-address-select>
    </template>
    <template v-else>
      <el-input v-model="bindVal" :placeholder="`请输入${meta.memo}`" />
    </template>
  </el-form-item>
</template>

<script>
import pluginPack from "../plugin-pack/plugin-pack.vue";
import ComTagsSelect from "@/components/com-tags-select/com-tags-select.vue";
import comParamSelect from "@/components/com-param-select/com-param-select.vue";
import ComSelect from "@/components/com-select/com-select.vue";
import ComUpload from "@/components/com-upload/com-upload.vue";
import ComAddressSelect from "@/components/com-address-select/com-address-select.vue";
import BigText from "../big-text/big-text.vue";

export default {
  components: {
    pluginPack,
    ComTagsSelect,
    comParamSelect,
    ComSelect,
    ComUpload,
    ComAddressSelect,
    BigText,
  },
  props: {
    meta: {
      type: Object,
      require: true,
    },
    formData: {
      type: Object,
      require: true,
    },
    hiddenLabel: {
      type: Boolean,
      default: false,
    },
    keyIndex: {
      type: Number,
      default: 0,
    },
    dictListFun: {
      type: Function,
    },
    modelValue: {
      type: [String, Number, Object, Boolean],
      default: "",
    },
  },
  data() {
    return {
      itemDictList: undefined,
      bindVal: this.modelValue,
    };
  },
  computed: {
    dictList() {
      return this.itemDictList || this.meta.dictList || [];
    },
  },
  watch: {
    formData: {
      deep: true,
      async handler() {
        this.initDict();
      },
    },
    bindVal(val) {
      this.$emit("update:modelValue", val);
    },
  },
  mounted() {
    this.initDict();
  },
  methods: {
    async initDict() {
      if (this.dictListFun) {
        this.itemDictList = await this.dictListFun(
          this.formData,
          this.keyIndex
        );
      }
    },
  },
};
</script>

<style></style>
